<template>
  <div class="recordDetail">
    <Navbar appTitle="任务详情" />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">任务编号：{{ detailInfo.taskCode }}</div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel">方案名称：</span>
            <span class="r-column limitColumn">{{
              detailInfo.programName || "--"
            }}</span>
          </div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel">创建时间：</span>
            <span class="r-column limitColumn">{{
              detailInfo.createTime || "--"
            }}</span>
          </div>
          <div class="status" :style="{ color: setColor(detailInfo) }">
            {{ detailInfo.taskStatusText }}
          </div>
        </div>
      </div>
    </div>
    <!-- taps-->
    <div class="tabs-f">
      <div style="background: #fff">
        <div style="width: 50%">
          <van-tabs v-model="tabActive">
            <van-tab title="点巡检信息"></van-tab>
            <van-tab title="点巡检项目"></van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="infoTopBox" v-show="tabActive == 0">
        <div class="itemTopInfo">
          <span class="spanLeft">保养设备：</span
          ><span class="spanRight"
            >{{ detailInfo.deviceCode || "--" }}-{{
              detailInfo.deviceName || "--"
            }}</span
          >
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">{{ "设备类别" }}：</span
          ><span class="spanRight">{{
            detailInfo.deviceCategoryText || "--"
          }}</span>
        </div>
      </div>
      <div class="infoTopBox" v-show="tabActive == 0">
        <div class="itemTopInfo">
          <span class="spanLeft">备注：</span
          ><span class="spanRight">{{ detailInfo.remark || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">图片：</span
          ><span class="spanRight">
            <upload
              class="fileclass"
              iconType="fj"
              :fileIds="detailInfo.attachment"
              :showUpload="false"
            ></upload>
          </span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">汇报人：</span
          ><span class="spanRight">
            {{ detailInfo.reporterText || "--" }}
          </span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">汇报时间：</span
          ><span class="spanRight">
            {{ detailInfo.reportTime || "--" }}
          </span>
        </div>
      </div>
      <div class="listBox" v-show="tabActive == 1">
        <van-list>
          <van-cell
            v-for="(item, index) in detailInfo.itemList"
            :key="index"
            style="margin-top: 0.1rem"
          >
            <div class="infoTopBox listClass">
              <div class="itemTopInfo">
                <span class="icon"></span>
                <span class="spanLeft">点巡检项：</span
                ><span class="spanRight">
                  {{ item.projectCode || "--" }}-{{
                    item.projectName || "--"
                  }}</span
                >
              </div>
              <div class="itemTopInfo">
                <span class="spanLeft">检查标准：</span
                ><span class="spanRight">
                  {{ item.checkStandard || "--" }}</span
                >
              </div>
              <div class="itemTopInfo">
                <span class="spanLeft">检查结果：</span
                ><span
                  :style="{ color: setResultColor(item) }"
                  class="spanRight"
                >
                  {{ setResultTxt(item) || "--" }}</span
                >
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { APILX } from "@/api/requestLx";
import upload from "@/components/upload/upload";
export default {
  name: "inspectionTaskDetail", //任务详情
  components: { Navbar, upload },
  data() {
    return {
      tabActive: 0,
      parentId: "",
      detailInfo: {},
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.parentId = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    setResultTxt(item) {
      let txt = {
        0: "正常",
        1: "异常",
      };
      return txt[item["checkResults"]] || "";
    },
    /* 状态颜色 */
    setResultColor(item) {
      let colors = {
        0: "#00a854",
        1: "#f04134",
      };
      return colors[item["checkResults"]] || "";
    },
    setColor(item) {
      let colors = {
        0: "#ff9d51",
        1: "#00b042",
      };
      return colors[item["taskStatus"]] || "";
    },
    // 获取详情
    getDetail() {
      APILX.messDeviceCheckTaskQueryById(this.parentId).then((res) => {
        if (res.success) {
          if (res.result) {
            this.detailInfo = res.result;
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.content {
  margin-left: 0 !important;
}
// 盘点物品样式

.left {
  width: 3.4rem !important;
}
.recordDetail {
  position: relative;
}
.tabs-f {
  position: relative;
  top: 1.53rem;
}
.infoTopBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  .itemTopInfo {
    position: relative;
    margin-top: 0.1rem;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    &:nth-child(1) {
      margin-top: 0;
    }
    .spanLeft {
      white-space: nowrap;
    }
    .spanRight {
      flex: 1;
      color: #191f25;
      /deep/.filerows2 {
        padding-bottom: 0;
      }
      /deep/.filerows2:nth-of-type(n + 2) {
        padding-top: 0.15rem;
      }
    }
  }
}
div.infoBotBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  div.remarkBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    margin-bottom: 0.1rem;
    div.leftRemark {
      width: 0.7rem;
    }

    div.rightRemark {
      flex: 1;
      color: #191f25;
    }
  }
}
.listBox {
  height: calc(100vh - 2.5rem);
  overflow: auto;
}
div.goodBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.06rem 0;
  img.goodLeft {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.02rem;
  }

  div.goodRight {
    flex: 1;
    margin-left: 0.1rem;
    div.gooodName {
      width: 90%;
      font-size: 0.16rem;
      font-weight: 500;
      color: #191f25;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }

    div.gooodCode {
      position: relative;
      margin-bottom: 0.1rem;
      span.codeBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.goodAfter {
        display: inline-block;
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.goodSpec {
      margin-bottom: 0.1rem;
      span.specBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.specAfter {
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.numberBox {
      box-sizing: border-box;
      padding: 0.1rem 0;
      border-top: 0.01rem solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.numTopBox {
        flex: 1;
        div.topTop {
          font-size: 0.14rem;
          color: #888888;
          margin-bottom: 0.1rem;
        }

        div.topBot {
          font-size: 0.16rem;
          color: #191f25;
        }
      }
    }
  }
}
.limitRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .limitLabel {
    // width: 0.8rem;
  }
  .limitColumn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // color: #1890ff;
  }
}
/deep/.van-tabs__line {
  width: 67px;
}
.status {
  margin-right: 0.1rem;
}
.icon {
  display: inline-block;
  width: 0.03rem;
  height: 0.14rem;
  background: #1890ff;
  position: absolute;
  left: -0.1rem;
  top: 0.06rem;
}
.listClass {
  padding: 0 0.16rem 0 0.16rem !important ;
}
</style>
